<template>
  <div>
    <!-- <h2>勋章墙</h2> -->
    <span class="kong"></span>
    <div>
      <van-nav-bar title="勋章墙" left-arrow @click-left="onClickLeft" fixed/>
      <div class="head">
        <h2>积累完成训练</h2>
        <p>已获得2枚</p>
      </div>
      <div class="main">
        <van-row gutter="20">
          <van-col span="8">
            <span></span>
            <p>运动新手</p>
          </van-col>
          <van-col span="8">
            <span></span>
            <p>运动达人</p>
          </van-col>
          <van-col span="8"></van-col>
        </van-row>
      </div>
    </div>
    <!-- 分割线 -->
    <div>
      <div class="head">
        <h2>训练天数</h2>
        <p>已获得3枚</p>
      </div>
      <div class="main">
        <van-row gutter="20">
          <van-col span="8">
            <span></span>
            <p>7天里程碑</p>
          </van-col>
          <van-col span="8">
            <span></span>
            <p>14天里程碑</p>
          </van-col>
          <van-col span="8">
            <span></span>
            <p>21天里程碑</p>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Medal",
  methods: {
    onClickLeft() {
      this.$router.push("/subscriber");
    }
  }
};
</script>

<style scoped>
.head {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.head h2 {
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  text-align: left;
  font-family: PingFangSC-regular;
  font-weight: normal;
}
.head p {
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin-top: -7px;
}
.main {
  margin-top: 22px;
}
.main span {
  display: block;
  width: 100px;
  height: 100px;
  line-height: 20px;
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 1);
}
.main p {
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.main .van-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kong {
  display: block;
  height: 50px;
}
</style>
